<template>
	<view :class="currentTheme">
		<a-nabbar :name="title" />
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class=" u-padding-left-32 u-padding-right-32">
				<view class="u-flex u-padding-top-32">
					<view class="u-flex-1"><item-search placeholder="请输入剧本名" @change="downCallback" v-model="form.name"></item-search></view>
					<view class="u-padding-left-36" @click="showSearchBox"><u-icon name="fenlei1" custom-prefix="custom-icon" color="#333333" size="46"></u-icon></view>
				</view>
				<view v-for="(item, index) in dataList" :key="index" class="u-margin-top-20" @click="goPathDetail(item)">
					<list-item :item="item" showDelete :isShare="false" :showTime="false" @remove="getRemove" productIdStr="productId" :showFooterRight="true">
						<view slot="content" style="width: 100%;">
							<view class="desc  u-font-24 u-margin-bottom-14 u-line-3">{{ item.info }}</view>
							<template>
								<view class="box-title u-font-24 u-margin-top-10  u-flex">
									<view class="u-flex item-content-width text-bold">
										体验价：
										<money :price="item.experiencePrice" size="28" color="#765CFE"></money>
									</view>
									<view class="color-grey">售价：￥{{ item.salePrice }}</view>
								</view>
								<view class="u-flex color-grey u-font-24 u-margin-top-10">
									<view class="item-content-width">销量：{{ item.sales || 0 }}</view>
									<view class="">库存：{{ item.stock || 0 }}</view>
								</view>
							</template>
						</view>
					</list-item>
				</view>
			</view>
		</mescroll-body>

		<fixed-team btnText="新增" @btnClick="addLarp"></fixed-team>

		<!-- 筛选条件弹出层 -->
		<u-popup mode="bottom" v-model="show" borderRadius="26">
			<view class="pop-title u-text-center u-font-36 box-title text-bold">筛选</view>
			<view class="u-padding-left-32 u-padding-right-32">
				<scroll-view scroll-y="true" style="height: 50vh;width: 100%;">
					<view v-for="(item, index) in selectList" :key="index">
						<view class="u-font-32 box-title search-item-title text-bold">{{ item.cateName }}</view>
						<view class="search-container">
							<view class="u-padding-25 time-list">
								<u-row gutter="40">
									<u-col :span="4" v-for="(val, i) in item.children" :key="i">
										<view class="u-text-center time-item" :class="{ 'time-item-active': item.checked.includes(val.id) }" @click="selectItem(item, val)">{{ val.cateName }}</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="search-box-btns u-flex">
					<view class="reset-btn search-btn u-flex-1 u-font-32 box-title text-bold" @click="resetBtn">重置</view>
					<view class="confirm-btn search-btn u-flex-1 u-font-32 text-white text-bold" @click="category">完成</view>
				</view>
			</view>
		</u-popup>

		<!-- 广告弹层 -->
		<!-- <view class="advertising" v-if="ad.imgUrl">
			<u-mask :show="shows">
				<view class="warp">
					<view class="rect">
						<image :src="ad.imgUrl" mode="" @click="linkUrl"></image>
						<view class="advertising_label" @click="isShow"><image src="https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/issue-index-light/icon--shanchu.png" mode=""></image></view>
					</view>
				</view>
			</u-mask>
		</view> -->
		<agreement-pop />
	</view>
</template>

<script>
import upCallback from '@/mixins/upCallbackMixin.js';
import { deleteIds, getDetail, add } from '@/api/crud.js';
import searchMixins from '@/mixins/searchMixins.js';
import itemSearch from '@/components/itemSearch/itemSearch.vue';
import agreementPop from '@/pagesA/acomponents/agreementPop.vue'
// import { getAdvertising } from '@/api/advertising.js';
export default {
	mixins: [upCallback, searchMixins],
	components: {
		itemSearch,agreementPop
	},
	data() {
		return {
			// onlyShowOneTime: uni.getStorageSync('onlyShowOneTime'),
			// ad: {},
			// advertising: '', // 广告图片
			// shows: false,
			// linkType: 2, // 广告类型
			// content: {
			// 	linkUrl: '', // 跳转链接
			// 	linkType: '',
			// 	id: ''
			// },
			itemStyle: {
				color: '#B0B2D8'
			},
			apiModule: 'shopApi',
			form: {
				types: '',
				categoryIds: [],
				name: ''
			},
			name: 'thirdQuery',
			title: '体验商城管理',
			option: {},
			count: 0,
			isEdit:false,
			apiType:'experienceProduct'
		};
	},
	computed: {

	},
	onLoad(option) {
		this.form.creatorId = this.loginForm.uid;
	},
	methods: {
		addLarp() {
			this.$u.route({
				url: '/pagesA/experienceStoreManager/addLarp',
				params: this.option
			});
		},
		getRemove(id) {
			const index = this.dataList.findIndex(val => val.productId == id);
			if (index > -1) {
				const item = this.dataList[index];
				deleteIds('', this.apiType, this.apiModule, item.id).then(res => {
					this.$u.toast('删除成功');
					this.dataList.splice(index, 1); //删除某项
				});
			}
		},
		goPathDetail({ id }) {
			if (!this.isEdit) {
				this.$u.route({
					url: '/pages/itemDetail/goodsDetail',
					params: {
						id
					}
				});
			}
		},
		showSearchBox() {
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/pages/pageStyle.scss';
.btn-style {
	border-radius: 50rpx;
	line-height: 64rpx;
	width: 190rpx;
	text-align: center;
	font-size: 24rpx;
	&.buy {
		color: white;
		background-color: $primary;
	}
	&.add-car {
		margin-right: 20rpx;
		color: #1f1b34;
		background-color: #e6e6e6;
	}
}
.car {
	position: fixed;
	bottom: 200rpx;
	right: 0;
	z-index: 55;
	width: 74rpx;
	height: 56rpx;
	background: $primary;
	border-radius: 50rpx 0 0 50rpx;
}
.item-content-width {
	// display: inline-block;
	width: 220rpx;
}
.pop-title {
	line-height: 104rpx;
}
.time-list {
	.time-item {
		height: 64rpx;
		background-color: var(--background-three-color);
		color: var(--reversal-color);
		text-align: center;
		line-height: 64rpx;
		border-radius: 32rpx;
		border: 1px solid var(--line-color);
		margin-top: 14rpx;
		margin-bottom: 14rpx;
		font-size: 24rpx;
		&-active {
			color: var(--background-three-color);
			background-color: var(--theme-color);
			border: 1px solid var(--theme-color);
		}
	}
}
.search-box-btns {
	margin-top: 40rpx;
	margin-bottom: 60rpx;
	.search-btn {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.reset-btn {
		background: var(--background-second-color);
		border-radius: 44rpx 0 0 44rpx;
	}
	.confirm-btn {
		background: var(--theme-color);
		border-radius: 0 44rpx 44rpx 0;
	}
}

.warp {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 550rpx;
	height: 746rpx;
	transform: translate(-50%, -50%);
	.rect {
		position: relative;
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}
		.advertising_label {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			left: 48%;
			bottom: -150rpx;
			image {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
}
</style>
